<extend name="Common:base"/>
<block name="head">
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
      font-family: Microsoft YaHei;
      color:#0d0f10;
      font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>
</block>
<block name="body">
  <div id="app" class="container">
    <div class="wrapp" v-show="show" style="display:none;">
      <div class="a">
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" ref="searchForm" :model="searchForm">
              <el-form-item>
                <el-select size="small" style="width:150px;" v-model="searchForm.type" 
                  placeholder="所属分类">
                  <el-option v-for="item in StyType" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="name" style="width:150px">
                <el-input v-model="searchForm.name" size="small" placeholder="用品名称"></el-input>
              </el-form-item>

              <el-form-item prop="use_name" style="width:150px">
                <el-input v-model="searchForm.use_name" size="small" placeholder="领用人/归还人"></el-input>
              </el-form-item>

              <el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="选择开始日期" 
                  @change="startDateChange">
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="end">
                <el-date-picker size="small"
                  v-model="searchForm.end" 
                  placeholder="选择截止日期" 
                  @change="endDateChange">
                </el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
                  <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
                </el-tooltip> 
              </el-form-item>
             
              <el-form-item>
                <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
                  <el-button size="small" @click="searchReset">重置</el-button>
                </el-tooltip>
              </el-form-item>

              <el-form-item>
                <el-tooltip content="点击刷新当前页面" placement="right">
                  <el-button @click="refresh" size="small" type="danger">刷新</el-button>
                </el-tooltip>
              </el-form-item>

            </el-form>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table v-loading="dataLoad" :data="dataList"
                @selection-change="handleChange"
                @row-dblclick = "showInfo"
                element-loading-text="{:L('DATA_LOGIN')}"
                empty-text="暂无数据,销售妹子正在努力中！"
                highlight-current-row ref="select">
              <el-table-column type="selection" width="55"></el-table-column>

              <el-table-column  align="center" prop="use_order" label="领单号" width="120px">
              </el-table-column>

              <el-table-column  align="center" prop="name" label="名称" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="asset_num" label="资产编码"  width="120px">
              </el-table-column>

              <el-table-column  align="center" prop="type" label="类别"  width="140px">
              </el-table-column>

              <el-table-column  align="center" prop="spec" label="规格" show-overflow-tooltip>
              </el-table-column> 

              <el-table-column  align="center" prop="purpose" label="用途" show-overflow-tooltip>
              </el-table-column> 

              <el-table-column  align="center" prop="unit" label="单位">
              </el-table-column>

              <el-table-column  align="center" prop="use_num" label="领用数量"  width="100px">
              </el-table-column>

              <el-table-column  align="center" prop="price" label="单价(元)"  width="100px">
              </el-table-column>

              <el-table-column  align="center" prop="sum" label="金额(元)"  width="100px">
              </el-table-column>

              <el-table-column  align="center" prop="use_name" label="领用人">
              </el-table-column>

              <el-table-column  align="center" prop="use_time" label="领用日期" width="180px">
              </el-table-column>

              <el-table-column  align="center" prop="return_num" label="归还数量" width="100px">
              </el-table-column>

              <el-table-column  align="center" prop="return_time" label="归还日期" width="180px">
              </el-table-column>

              <el-table-column  align="center" prop="remark" label="备注" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" label="操作" fixed="right">
                <template scope="scope">
                  <el-button type="info" size="small" @click="handleEdit(scope.$index, scope.row)">归还</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="wrapper">
                <el-tooltip content="至少选择一条申请再点击删除" placement="bottom-start">
                  <el-button size="small" @click="delApplication" type="danger">删除</el-button>
                </el-tooltip>
                <el-tooltip content="点击新增一个活动申请" placement="right">
                  <el-button size="small" @click="openDialog('addUseReturn')" type="primary">新增领用</el-button>
                </el-tooltip>
              </span>
            </div>
          </el-col>
          <el-col :span="12" >
            <div class="grid-content bg-purple-light pull-right">
              <!-- page -->
              <include file="Common:_pagination" />
              <!-- / page -->
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="dialogWrapper" v-show="show" style="display: none">
        <!-- 新增 -->
        <include file="_addUseReturn" />
        <!-- / 新增 -->
        <!-- 修改 -->
        <include file="_editUseReturn" />
        <!-- / 修改 -->
        <!-- 展示行信息 -->
        <include file="_infoContents" />
        <!-- / 展示行信息 -->
      </div>
    </div>
  </div>
</block>
<block name="scripts">
<script>
  window.defaultOption.setDatas({
    editMax:"99",
    multipleSelection: [],
    newMultipleSelection:[],  
    dialogLabelWidth:"120px",
    infoDialog:false,
    infoData:{},
    dataList:[
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
      {use_order:"20170804",name:"打印机",asset_num:"1008611",type:"耗材/文印设备",spec:"索尼 白色 464 x 464 x 224mm",purpose:"不跟你说呀呀呀呀",unit:"台",use_num:"10",price:"6666",sum:"60000",use_name:"人事B",use_time:"2017-08-04 12:12:12",return_num:"5",return_time:"2017-08-04 22:22:22",remark:"一万个理由"},
    ],
    StyType:[
      {label:"耗材/文印设备",value:"1"},
      {label:"IT/数码/通讯",value:"2"},
      {label:"办公设备/电器",value:"3"},
      {label:"办公日用",value:"4"},
      {label:"食品/饮料",value:"5"},
      {label:"礼品/卡卷",value:"6"},
      {label:"文具/财务",value:"7"},
      {label:"纸张",value:"8"},
      {label:"测试",value:"9"},
    ],

  }).setForm('search',{
    type:"",
    name:"",
    use_name:"",
    start:"",
    end:"",
  }).setForm('addUseReturn',{
    use_order:"",
    name:"",
    asset_num:"",
    type:"",
    spec:"",
    purpose:"",
    unit:"",
    use_num:"",
    price:"",
    sum:"",
    use_name:"",
    use_time:"",
    use_time2:"",
    return_num:"",
    return_time:"",
    return_time2:"",
    remark:"",
  },true).setForm('editUseReturn',{
    return_num:"",
    return_time:"",
    return_time2:"",
  },true).setMethod('startDateChange',function(v){
    this.searchForm.start = v;
  }).setMethod('endDateChange',function(v){
    this.searchForm.end = v;
  }).setMethod('changeStatus',function(v){
    this.dataList.forEach(function(element){
      if(v > 1){
        element.status = v == 2 ? "审批通过" : "审批不通过";
      }else{
        element.status = "待审批";
      }
      
    });
  
  }).setMethod('changeType',function(v){
    this.dataList.forEach(function(element){
      if(v > 1){
        element.type = v == 2 ? "保修申请" : "报废申请";
      }else{
        element.type = "采购申请";
      }
      
    });
  }).setMethod('beforeActivity',function(){
    //console.log(this.multipleSelection);
    var vmThis = this;
    if (this.multipleSelection.length ==0) {
      this.closeDialog('businessTrip');
      this.$message.error('请至少选择一位客户');
      return false;
    } else {
      
      this.newMultipleSelection = this.multipleSelection.splice(0,this.multipleSelection.length);

      return this.newMultipleSelection;
    }
  }).setMethod('handleChange',function(val){
    this.multipleSelection = [];
    this.multipleSelection = val;
  }).setMethod('approveSubmit',function(){  
    for(var i = 0; i < this.dataList.length; i++){
      for(var k = 0; k < this.newMultipleSelection.length; k++){
        if(this.dataList[i] == this.newMultipleSelection[k]){
          this.dataList[i].status = this.approveForm.status == 1 ? "审批通过" : "审批不通过";
        }
      }
    }

    this.closeDialog('businessTrip');

  }).setMethod('delApplication',function(){
    var vmThis = this;
    if (this.multipleSelection.length ==0) {
      this.$message.error('请至少选择一位客户');
      return false;
    } else {
      var row = this.multipleSelection;
      this.row=row;
      this.$confirm('确定取消吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function(){
        for(var i = 0; i < vmThis.dataList.length; i++){
          for(var k = 0; k < vmThis.multipleSelection.length; k++){
            if(vmThis.dataList[i] == vmThis.multipleSelection[k]){
              
              vmThis.dataList.splice(i,1);

            }
          }
        }
        vmThis.$message({
          type: 'success',
          message: '删除成功！'
        });  
      }).catch(function() {
        vmThis.$message({
          type: 'info',
          message: '已取消删除！'
        });          
      });
     
    }
  }).setMethod('useTime',function(v){
    this.addUseReturnForm.use_time = v;
  }).setMethod('returnTime',function(v){
    this.addUseReturnForm.return_time = v;
  }).setMethod('editReturnTime',function(v){
    this.editUseReturnForm.return_time = v;
  }).setMethod('addUseReturnSubmit',function(addUseReturnForm){
    for(var i = 0;i < this.StyType.length;i++){
      if(this.StyType[i].value == addUseReturnForm.type){
        addUseReturnForm.type = this.StyType[i].label;
      }
    }

    this.dataList.unshift(addUseReturnForm);
    this.closeDialog('addUseReturn');
  }).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
    console.log(row);
  }).setMethod('handleEdit',function(index,row){
    console.log(index);
    this.editUseReturnForm.index = index;
    this.openDialog('editUseReturn');
    this.editMax = row.use_num;
  }).setMethod('editUseReturnSubmit',function(editUseReturnForm){
    console.log(this.$refs.select);
    
    for(var i = 0; i < this.dataList.length; i++){
      if(this.editUseReturnForm.index == i){
        this.dataList[i].return_num = editUseReturnForm.return_num != "" ? editUseReturnForm.return_num : this.dataList[i].return_num;
        this.dataList[i].return_time = editUseReturnForm.return_time = "" ? editUseReturnForm.return_time : this.dataList[i].return_time;
        this.dataList[i].use_num -= editUseReturnForm.return_num;
        this.dataList[i].sum = this.dataList[i].use_num * this.dataList[i].price;
      }
    }
    this.closeDialog('editUseReturn');
    this.$message({
      type: 'success',
      message: '修改成功！'
    });

  });
</script>
</block>